<template>
	<view class="light-box">
		<image  @click="jump(data[active].url)" :src="data[active].photo" class="large"></image>
		<view class="list-block">
			<image v-for="(item,index) in data" @click="active=index" :key="item.id" :src="item.photo" :class="active==index?'active':''" class="list-item"></image>
		</view>
		<view class="info-block">
			<view class="primary">{{data[active].name}} | 评分{{data[active].score}}分 | {{data[active].type}}</view>
			<view class="second">{{data[active].describe}}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			data:Array
		},
		data(){
			return{
				active:0
			}
		},
		methods:{
			jump(e){
				if(e){
					uni.navigateTo({
						url:e
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.light-box{
		width: 100%;
		height: 430rpx;
		position: relative;
		overflow: hidden;
		border-radius: 20rpx;
		.large{
			width: 100%;
			height: 100%;
		}
		.list-block{
			width: 130rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: absolute;
			right: 0;
			top:0;
			background: rgba(0, 0, 0, 0.7);
			padding: 10rpx;
			.list-item{
				width: 100%;
				height:calc((100% - 40rpx)/5);
				border-radius: 10rpx;
				border: 2px solid rgba(0, 0, 0, 0);
				margin-bottom: 10rpx;
			}
			.list-item.active{
				border: 2px solid #fff;
			}
			.list-item:last-child{
				margin-bottom: 0;
			}
		}
		.info-block{
			width: calc(100% - 130rpx);
			position: absolute;
			left: 0;
			bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 20rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			.primary{
				width: 100%;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.second{
				font-size: 24rpx;
				margin-top: 10rpx;
				font-weight: normal;
			}
		}
	}
</style>